<!--
* @author wn
* @date 2022/11/17 11:21:23
* @description: 图表4
!-->
<template>
	<div ref="barParking" style="height: 330px"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { echartsBarParking, getEchartsDataFour } from '@/network/home'
import { onMounted, ref } from 'vue'
import elementResizeDetectorMaker from 'element-resize-detector'

// 组件实例 传入  echarts init
const barParking = ref('')
let myEcharts = null
// 获取数据
getEchartsDataFour().then(({ day, num }) => {
	// 随便 一个 num数据 的所有 key
	const keys = Object.keys(num)
	echartsBarParking.xAxis.data = day
	keys.forEach((key, index) => {
		echartsBarParking.series[index].name = key
		echartsBarParking.series[index].data = num[key]
	})
	myEcharts.setOption(echartsBarParking)
})
// 监听  div 的 大小变化
const erd = elementResizeDetectorMaker()
// dom 需要实例化之后才可以
onMounted(() => {
	myEcharts = echarts.init(barParking.value)

	erd.listenTo(barParking.value, () => {
		myEcharts.resize()
	})
})
</script>
<style scoped lang="scss"></style>
